<template>
  <div>
     <!-- 轮播图 -->
    <!-- <mt-swipe :auto="4000"> -->
     <!--  在组建中使用v-for时候一定要用key，数据没有id的话可以用url，img这两个是唯一的 -->
      <!-- <mt-swipe-item v-for="item in lunbotuList" :key="item.url"></mt-swipe-item>
      <img :src="item.img" alt=""> -->
      <!-- item.img此时是计算表达式，src是普通属性此时
      会把item.img当做普通的字符串输出，要想把他当做计算属性的话要加v-bind -->
    <!-- </mt-swipe> -->
    <mt-swipe :auto="4000">
      <mt-swipe-item>1</mt-swipe-item>
      <mt-swipe-item>2</mt-swipe-item>
      <mt-swipe-item>3</mt-swipe-item>
    </mt-swipe>
    <!-- 六宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/bookshelf1.png">
                        <div class="mui-media-body">新闻资讯</div></a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../../images/bookshelf2.png">
		                    <div class="mui-media-body">图片分享</div></a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../images/bookshelf3.png">
		                    <div class="mui-media-body">商品购买</div></a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../images/bookshelf4.png">
		                    <div class="mui-media-body">留言反馈</div></a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/bookshelf5.png">
		                    <div class="mui-media-body">视频专区</div></a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/bookshelf6.png">
		                    <div class="mui-media-body">联系我们</div></a>
                </li>
		            
		        </ul>


</div> 

  
 
</template>

<script>
export default {
  

}
</script>  


 /* import {toast} from "mint-ui"
 export default { */
   /* data() {
    return {
      lunbotuList:[]/* 定义一个空数组用来接收轮播图数据 */
  /*   }
  }, */ 
   /* created(){
    this.getLunbotu()
  }, */  
    /* methods: {
      getLunbotu(){  //获取轮播图的方法
        this.$http.get("http://vue.studyit.io/api/getlunbo").then(result=>{
            console.log("result.body")
            if(result.body.status===0){
                this.lunbotuList=result.body.message;/* 如果请求成功赋值给this.lunbotuList数组.然胡可以v-for循环了 */
            //  } else{
                  // 失败的 
                  //  Toast("加载轮播图失败") 
            //  }  
        //  })
      // }

    // } 
//  }   
  
<style lang='scss' scoped>
 /*  .mint-swipe{ 可以有两种写法

    height: 200px;
    .mint-swipe-item:nth-child(1){
      background-color: #f00;
    }
     .mint-swipe-item:nth-child(2){
      background-color: #0f0;
    }
     .mint-swipe-item:nth-child(3){
      background-color: #00f;
    }
  } */
  .mint-swipe{
    height: 200px;
    .mint-swipe-item{
      &:nth-child(1){
      background-color: #f00;
      }
      &:nth-child(2){
      background-color: #0f0;
      }
      &:nth-child(3){
      background-color: #00f;
      }
      img{ /* 轮播图片 */
        width: 100%;
        height: 100%;
      }
      .mui-media-body{
        font-size: 13px;
      }
    }
}
.mui-grid-view.mui-grid-9{
  background-color: #fff;
  border:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
   border:none;
   img{
     width: 60px;
     height: 70px;
   }
}

</style>